<script setup>
import { ref, onMounted } from 'vue'
import { RouterLink, useRouter } from 'vue-router'

const router = useRouter()
const currentUser = ref(null)
const isDropdownVisible = ref(false)
const likedCount = ref(0)

// 跳转到个人主页的赞过界面
const goToLikedPosts = () => {
  isDropdownVisible.value = false // 关闭悬浮窗
  router.push('/profile?tab=likes') // 跳转到个人主页并指定tab为likes
}

// 更新点赞数量
const updateLikedCount = () => {
  const savedLikedPosts = localStorage.getItem('likedPosts')
  if (savedLikedPosts) {
    likedCount.value = JSON.parse(savedLikedPosts).length
  } else {
    likedCount.value = 0
  }
}

// 检查用户登录状态
onMounted(() => {
  const user = localStorage.getItem('currentUser')
  if (user) {
    currentUser.value = JSON.parse(user)
  } else {
    // 设置默认用户信息，用于展示个人主页功能
    currentUser.value = {
      id: 10000,
      username: '用户151314584195',
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
    }
  }
  
  // 初始化点赞数量
  updateLikedCount()
  
  // 监听localStorage变化
  window.addEventListener('storage', (e) => {
    if (e.key === 'likedPosts') {
      updateLikedCount()
    }
  })
  
  // 监听悬浮窗显示时更新点赞数量
  window.addEventListener('click', (e) => {
    const avatarContainer = document.querySelector('.user-avatar-container')
    if (avatarContainer && avatarContainer.contains(e.target)) {
      updateLikedCount()
    }
  })
})

// 跳转到登录页面
const goToLogin = () => {
  window.location.href = '/login'
}

// 注销函数
const logout = () => {
  localStorage.removeItem('currentUser')
  currentUser.value = null
  alert('已成功注销')
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <header class="header">
    <div class="nav-container">
      <!-- 左侧Logo和导航 -->
      <div class="left-nav">
        <div class="logo">小白盒</div>
        <nav class="main-nav">
          <RouterLink to="/" class="nav-item" active-class="active">首页</RouterLink>
          <RouterLink to="/library" class="nav-item" active-class="active">游戏库</RouterLink>
          <a href="#" class="nav-item">社区</a>
          <a href="#" class="nav-item">资讯</a>
          <RouterLink to="/shop" class="nav-item" active-class="active">商店</RouterLink>
        </nav>
      </div>

      <!-- 中间搜索框 -->
      <div class="search-container">
        <div class="search-box">
          <input type="text" placeholder="搜索游戏、用户、话题..." class="search-input" />
          <button class="search-btn">搜索</button>
        </div>
      </div>

      <!-- 右侧用户信息 -->
      <div class="right-nav">
        <div v-if="currentUser" class="user-avatar-container">
          <div class="user-avatar" @click="isDropdownVisible = !isDropdownVisible">
            <img :src="currentUser.avatar" :alt="currentUser.name" />
          </div>
          <div class="user-dropdown" v-show="isDropdownVisible">
            <div class="dropdown-header">
              <img :src="currentUser.avatar" :alt="currentUser.name" class="dropdown-avatar" />
              <div class="dropdown-info">
                <div class="username">{{ currentUser.username }}</div>
                <div class="user-level">Lv.1</div>
                <div class="level-bar-container">
                  <span class="level-label">盒友等级</span>
                  <div class="level-bar">
                    <div class="level-progress" style="width: 6.67%"></div>
                  </div>
                  <span class="level-text">1/15</span>
                </div>
              </div>
            </div>

            <!-- 统计按钮区域 -->
            <div class="stats-container">
              <div class="stat-item">
                <span class="stat-number">0</span>
                <span class="stat-label">关注</span>
              </div>
              <div class="stat-item" @click="goToLikedPosts">
                <span class="stat-number">{{ likedCount }}</span>
                <span class="stat-label">赞过</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">0</span>
                <span class="stat-label">收藏</span>
              </div>
            </div>
            <div class="dropdown-menu">
              <div class="menu-grid">
                <a href="/profile" class="menu-item">
                  <span class="menu-icon">👤</span>
                  我的主页
                </a>
                <a href="#" class="menu-item">
                  <span class="menu-icon">🎮</span>
                  游戏笔记
                </a>
                <RouterLink to="/shop" class="menu-item">
                  <span class="menu-icon">🏪</span>
                  游戏商城
                </RouterLink>
                <a href="#" class="menu-item">
                  <span class="menu-icon">💎</span>
                  会员中心
                </a>
                <a href="#" class="menu-item">
                  <span class="menu-icon">🎁</span>
                  我的优惠
                </a>
                <a href="#" class="menu-item">
                  <span class="menu-icon">👞</span>
                  我的足迹
                </a>
                <a href="#" class="menu-item">
                  <span class="menu-icon">⚙️</span>
                  我的设置
                </a>
                <a href="/profile?tab=following" class="menu-item">
                  <span class="menu-icon">👥</span>
                  我的关注
                </a>
              </div>
              <div class="menu-divider"></div>
              <a href="#" class="menu-item logout" @click="logout">
                <span class="menu-icon">🚪</span>
                退出登录
              </a>
            </div>
          </div>
        </div>
        <button v-else class="login-btn" @click="goToLogin">登录</button>
        <button class="btn-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
        </button>
        <button class="btn-icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
        </button>
        <button class="btn-red">发布动态</button>
      </div>
    </div>
  </header>
</template>

<style scoped>
/* 头部导航栏样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* 为应用添加顶部间距，确保内容不被头部栏遮挡 */
:global(.app-content) {
  margin-top: 70px; /* 设置与头部栏高度相匹配的间距 */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.left-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff4757;
}

.main-nav {
  display: flex;
  gap: 20px;
}

.nav-item {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #ff4757;
}

.nav-item.active {
  color: #ff4757;
  font-weight: bold;
}

.search-container {
  flex: 1;
  max-width: 400px;
  margin: 0 40px;
}

.search-box {
  position: relative;
  display: flex;
}

.search-input {
  width: 100%;
  padding: 8px 40px 8px 15px;
  background-color: #222;
  border: 1px solid #333;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #ff4757;
}

.search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}

.right-nav {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar-container {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  min-width: 300px;
  z-index: 1000;
}

.dropdown-header {
  padding: 15px;
  border-bottom: 1px solid #333;
  display: flex;
  gap: 12px;
}

.dropdown-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.dropdown-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.user-level {
  color: #ff4757;
  font-size: 14px;
  margin-bottom: 8px;
}

.level-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #999;
}

.level-bar {
  flex: 1;
  height: 4px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
}

.level-progress {
  height: 100%;
  background: linear-gradient(90deg, #ff4757, #ff7675);
}

.stats-container {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #333;
  gap: 10px;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  background: #222;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.stat-item:hover {
  background: #2a2a2a;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.dropdown-menu {
  padding: 8px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.menu-item:hover {
  background: #2a2a2a;
}

.menu-icon {
  font-size: 16px;
}

.menu-divider {
  height: 1px;
  background: #333;
  margin: 8px 0;
}

.menu-item.logout {
  color: #ff4757;
}

.btn-icon {
  width: 36px;
  height: 36px;
  border: none;
  background: #222;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: #2a2a2a;
}

.btn-red {
  padding: 8px 16px;
  background: #ff4757;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-red:hover {
  background: #ff3838;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-container {
    max-width: 300px;
  }
}

@media (max-width: 992px) {
  .main-nav {
    display: none;
  }
  
  .search-container {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 10px;
  }
  
  .search-container {
    display: none;
  }
  
  .right-nav {
    gap: 10px;
  }
}
</style>